<template>
  <view class="test-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="navbar-title">心理自测</text>
        <text class="navbar-subtitle">了解你的心理状态</text>
      </view>
    </view>

    <!-- 测评卡片列表 -->
    <scroll-view scroll-y class="test-list">
      <view class="test-card" v-for="test in testList" :key="test.id" @tap="goToTest(test)">
        <view class="test-icon">
          <text class="iconfont" :class="test.icon"></text>
        </view>
        <view class="test-content">
          <view class="test-title">{{ test.title }}</view>
          <view class="test-desc">{{ test.description }}</view>
          <view class="test-info">
            <text class="test-time">{{ test.duration }}</text>
            <text class="test-questions">{{ test.questions }}题</text>
          </view>
        </view>
        <view class="test-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </scroll-view>

    <!-- 历史记录入口 -->
    <view class="history-section">
      <view class="section-title">测评历史</view>
      <view class="history-card" @tap="goToHistory">
        <view class="history-icon">
          <text class="iconfont icon-history"></text>
        </view>
        <view class="history-content">
          <view class="history-title">查看历史记录</view>
          <view class="history-desc">回顾你的心理状态变化</view>
        </view>
        <view class="history-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      testList: [
        // 基础心理测评
        {
          id: 'anxiety',
          title: '焦虑自测',
          description: '评估你的焦虑程度，了解心理压力状况',
          duration: '3-5分钟',
          questions: 7,
          icon: 'icon-anxiety',
          path: '/pages/test/anxiety',
          category: 'basic'
        },
        {
          id: 'stress',
          title: '压力指数',
          description: '测量你当前的压力水平和应对能力',
          duration: '5-8分钟',
          questions: 10,
          icon: 'icon-stress',
          path: '/pages/test/stress',
          category: 'basic'
        },
        {
          id: 'sleep',
          title: '睡眠质量',
          description: '评估你的睡眠状况和睡眠障碍程度',
          duration: '3-5分钟',
          questions: 8,
          icon: 'icon-sleep',
          path: '/pages/test/sleep',
          category: 'basic'
        },
        
        // 情绪能力测评
        {
          id: 'emotional-sensitivity',
          title: '情绪敏感度测试',
          description: '评估你对情绪刺激的敏感程度和反应模式',
          duration: '5-8分钟',
          questions: 20,
          icon: 'icon-emotion',
          path: '/pages/test/emotional-sensitivity',
          category: 'emotion'
        },
        {
          id: 'emotion-regulation',
          title: '情绪调节能力测评',
          description: '评估你识别、理解和管理情绪的能力',
          duration: '5-7分钟',
          questions: 15,
          icon: 'icon-regulation',
          path: '/pages/test/emotion-regulation',
          category: 'emotion'
        },
        
        // 性格特质测评
        {
          id: 'stress-tolerance',
          title: '压力承受力测试',
          description: '评估你在压力情境下的应对能力和韧性',
          duration: '4-6分钟',
          questions: 12,
          icon: 'icon-tolerance',
          path: '/pages/test/stress-tolerance',
          category: 'personality'
        },
        {
          id: 'resilience',
          title: '心理韧性测试',
          description: '评估你面对挫折和困难时的恢复能力',
          duration: '6-8分钟',
          questions: 18,
          icon: 'icon-resilience',
          path: '/pages/test/resilience',
          category: 'personality'
        },
        {
          id: 'perfectionism',
          title: '完美主义倾向测评',
          description: '评估你的完美主义程度和对标准的要求',
          duration: '5-7分钟',
          questions: 16,
          icon: 'icon-perfectionism',
          path: '/pages/test/perfectionism',
          category: 'personality'
        },
        
        // 自我认知测评
        {
          id: 'self-esteem',
          title: '自尊水平测评',
          description: '评估你的自我价值感和自信水平',
          duration: '3-5分钟',
          questions: 10,
          icon: 'icon-self-esteem',
          path: '/pages/test/self-esteem',
          category: 'self'
        },
        {
          id: 'intrinsic-motivation',
          title: '内在动机测评',
          description: '评估你的内在驱动力和自主性水平',
          duration: '5-8分钟',
          questions: 18,
          icon: 'icon-motivation',
          path: '/pages/test/intrinsic-motivation',
          category: 'self'
        },
        
        // 社交与专注力测评
        {
          id: 'social-anxiety',
          title: '社交焦虑测试',
          description: '评估你在社交场合的焦虑程度和回避行为',
          duration: '4-6分钟',
          questions: 12,
          icon: 'icon-social',
          path: '/pages/test/social-anxiety',
          category: 'social'
        },
        {
          id: 'mindfulness-attention',
          title: '正念专注力测试',
          description: '评估你的专注能力和正念觉察水平',
          duration: '5-7分钟',
          questions: 14,
          icon: 'icon-mindfulness',
          path: '/pages/test/mindfulness-attention',
          category: 'social'
        }
      ]
    }
  },
  
  onLoad() {
    this.loadTestHistory()
  },
  
  methods: {
    // 跳转到具体测评
    goToTest(test) {
      uni.navigateTo({
        url: test.path,
        success: () => {
          console.log('跳转到测评:', test.title)
        },
        fail: (err) => {
          console.error('跳转失败:', err)
          uni.showToast({
            title: '页面开发中',
            icon: 'none'
          })
        }
      })
    },
    
    // 查看历史记录
    goToHistory() {
      uni.navigateTo({
        url: '/pages/profile/stats'
      })
    },
    
    // 加载测评历史
    loadTestHistory() {
      try {
        const history = uni.getStorageSync('test_history') || []
        console.log('测评历史:', history)
      } catch (e) {
        console.error('加载历史记录失败:', e)
      }
    }
  }
}
</script>

<style scoped>
.test-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 100rpx;
}

/* 自定义导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 88rpx 40rpx 40rpx;
  color: white;
}

.navbar-content {
  text-align: center;
}

.navbar-title {
  font-size: 44rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 10rpx;
}

.navbar-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

/* 测评列表 */
.test-list {
  padding: 40rpx 30rpx;
  height: calc(100vh - 300rpx);
}

.test-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.test-card:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
}

.test-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--warning-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}

.test-icon .iconfont {
  font-size: 48rpx;
  color: white;
}

.test-content {
  flex: 1;
}

.test-title {
  font-size: 36rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10rpx;
}

.test-desc {
  font-size: 28rpx;
  color: var(--text-secondary);
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.test-info {
  display: flex;
  gap: 20rpx;
}

.test-time,
.test-questions {
  font-size: 24rpx;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.test-arrow {
  color: var(--text-tertiary);
}

.test-arrow .iconfont {
  font-size: 32rpx;
}

/* 历史记录部分 */
.history-section {
  padding: 0 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20rpx;
}

.history-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.history-card:active {
  transform: scale(0.98);
}

.history-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, var(--info-color) 0%, var(--primary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}

.history-icon .iconfont {
  font-size: 40rpx;
  color: white;
}

.history-content {
  flex: 1;
}

.history-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8rpx;
}

.history-desc {
  font-size: 26rpx;
  color: var(--text-secondary);
}

.history-arrow {
  color: var(--text-tertiary);
}

.history-arrow .iconfont {
  font-size: 32rpx;
}

/* 图标字体 */
.iconfont {
  font-family: 'iconfont';
}

.icon-anxiety::before { content: '😰'; }
.icon-stress::before { content: '😤'; }
.icon-sleep::before { content: '😴'; }
.icon-emotion::before { content: '🎭'; }
.icon-regulation::before { content: '🎯'; }
.icon-tolerance::before { content: '💪'; }
.icon-resilience::before { content: '🌱'; }
.icon-perfectionism::before { content: '🎯'; }
.icon-self-esteem::before { content: '💎'; }
.icon-motivation::before { content: '🚀'; }
.icon-social::before { content: '👥'; }
.icon-mindfulness::before { content: '🧘'; }
.icon-history::before { content: '📊'; }
.icon-arrow-right::before { content: '→'; }
</style>